<!-- views/history.ejs -->
<!DOCTYPE html>
<html lang="en" class="h-full" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modified Documents - Paperless-AI</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <style>
        .dataTables_wrapper .dataTables_length, 
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 1rem;
        }
        .dataTables_wrapper .dataTables_info {
            margin-top: 1rem;
        }
        .dataTables_wrapper .dataTables_paginate {
            margin-top: 1rem;
        }
        .highlight-row {
            background-color: rgba(59, 130, 246, 0.1);
        }
        .modal {
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
        }

        .modal.show {
            opacity: 1;
            pointer-events: auto;
        }

        .modal.hidden {
            display: none;
        }
            </style>
</head>
<body class="h-full">
    <button id="themeToggle" class="theme-toggle">
        <i class="fas fa-moon dark:fas fa-sun"></i>
    </button>

    <div class="layout-container">
        <button id="mobileMenuButton" class="mobile-menu-button">
            <i class="fas fa-bars"></i>
        </button>
        <!-- Sidebar -->
        <div id="sidebarOverlay" class="sidebar-overlay"></div>
        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="/favicon.ico" class="no-invert" alt="Paperless AI Logo" style="height: 60px;">
                <h1 class="brand-title">Paperless-AI<small style="display: block;"><%= version %></small></h1>
            </div>

            <nav class="sidebar-nav">
                <ul>
                    <li><a href="/dashboard" class="sidebar-link"><i class="fas fa-home"></i><span>Dashboard</span></a></li>
                    <li><a href="/manual" class="sidebar-link"><i class="fas fa-file-alt"></i><span>Manual</span></a></li>
                    <li><a href="/chat" class="sidebar-link"><i class="fa-solid fa-comment"></i><span>Chat</span></a></li>
                    <li><a href="/rag" class="sidebar-link"><i class="fa-solid fa-comment"></i><span>RAG Chat</span></a></li>
                    <li><a href="/playground" class="sidebar-link"><i class="fa-solid fa-flask-vial"></i><span>Playground</span></a></li>
                    <li><a href="/history" class="sidebar-link active"><i class="fa-solid fa-clock-rotate-left"></i><span>History</span></a></li>
                    <li><a href="/settings" class="sidebar-link"><i class="fas fa-cog"></i><span>Settings</span></a></li>
                    <li><a href="/logout" class="sidebar-link"><i class="fa-solid fa-right-from-bracket"></i><span>Logout</span></a></li>
                </ul>
                <a href="https://github.com/clusterzx/paperless-ai" 
                class="github-button" 
                style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
                <span class="star-button">
                    <svg class="star-icon" height="16" width="16" viewBox="0 0 16 16">
                        <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path>
                    </svg>
                    Star
                </span>
                <span id="starCount" class="star-count">1.2k</span>
            </a>
            <p style="position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #555; text-align: center;">
                Please support us on GitHub
            </p>
            </nav>
        </aside>

        <main class="main-content modified-documents-page">
            <div class="content-wrapper">
                <div class="content-header flex justify-between items-center mb-6">
                    <h1 class="content-title">Modified Documents</h1>
                    <div class="flex gap-4">
                        <button id="resetSelectedBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                            Reset Selected
                        </button>
                        <button id="resetAllBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                            Reset All
                        </button>
                    </div>
                </div>

                <!-- Custom Filters -->
                <div class="flex flex-wrap gap-4 mb-6">
                    <div class="min-w-[200px]">
                        <select id="tagFilter" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Tags</option>
                            <% filters.allTags.forEach(function(tag) { %>
                                <option value="<%= tag.id %>"><%= tag.name %></option>
                            <% }); %>
                        </select>
                    </div>
                    
                    <div class="min-w-[200px]">
                        <select id="correspondentFilter" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Correspondents</option>
                            <% filters.allCorrespondents.forEach(function(corr) { %>
                                <option value="<%= corr %>"><%= corr %></option>
                            <% }); %>
                        </select>
                    </div>
                </div>

                <!-- DataTable -->
                <div class="material-card">
                    <div class="overflow-x-auto">
                        <table id="historyTable" class="w-full">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selectAll" class="rounded"></th>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Tags</th>
                                    <th>Correspondent</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Confirmation Modal for Selected Documents -->
    <div id="confirmModal" class="modal hidden">
        <div class="modal-overlay"></div>
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">Confirm Reset</h3>
                <button class="modal-close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-content">
                <p class="mb-4">Are you sure you want to reset the selected documents to their original values? This action cannot be undone.</p>
                <div class="flex justify-end gap-4">
                    <button id="cancelReset" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Cancel</button>
                    <button id="confirmReset" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">Confirm Reset</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal for All Documents -->
    <div id="confirmModalAll" class="modal hidden">
        <div class="modal-overlay"></div>
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">Confirm Reset All</h3>
                <button class="modal-close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-content">
                <p class="mb-4">Are you sure you want to reset <b>all</b> documents to their original values? This action cannot be undone.</p>
                <div class="flex justify-end gap-4">
                    <button id="cancelResetAll" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Cancel</button>
                    <button id="confirmResetAll" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">Confirm Reset</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobileMenuButton');
            const sidebar = document.querySelector('.sidebar');
            const sidebarOverlay = document.getElementById('sidebarOverlay');
            
            function toggleSidebar(event) {
                event.stopPropagation(); // Prevent event bubbling
                sidebar.classList.toggle('active');
                sidebarOverlay.classList.toggle('active');
                
                // Toggle menu icon
                const icon = mobileMenuButton.querySelector('i');
                if (sidebar.classList.contains('active')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }

            // Toggle sidebar when clicking the menu button
            mobileMenuButton.addEventListener('click', toggleSidebar);

            // Close sidebar when clicking the overlay
            sidebarOverlay.addEventListener('click', function(event) {
                event.stopPropagation(); // Prevent event bubbling
                if (sidebar.classList.contains('active')) {
                    toggleSidebar(event);
                }
            });

            // Prevent sidebar from closing when clicking inside it
            sidebar.addEventListener('click', function(event) {
                event.stopPropagation();
            });

            // Handle links in sidebar
            const sidebarLinks = document.querySelectorAll('.sidebar-link');
            sidebarLinks.forEach(link => {
                link.addEventListener('click', function(event) {
                    // Don't prevent default here to allow navigation
                    event.stopPropagation();
                });
            });
        });
    </script>
    <script>
        // get github stars count from repo
        async function getStarsCount() {
            try {
                const response = await fetch('https://api.github.com/repos/clusterzx/paperless-ai');
                if (!response.ok) throw new Error('Failed to fetch repo info');
                
                const data = await response.json();
                document.getElementById('starCount').textContent = data.stargazers_count.toLocaleString();
            } catch (error) {
                console.error('Failed to fetch stars count:', error);
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            getStarsCount();
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="js/history.js"></script>
</body>
</html>